<template>
    <div v-show="listLength"> 
        <label >
        <input type="checkbox" name="全选" id="xx" 
        :checked="isAll" 
        @change="oCheckAll">全选</label>
        <span id="todocount">{{ tj }}/{{ listLength }}</span>
    </div>
</template>


<script>
export default {
    name: 'myFooter',
    props:["items","checkAll"],
    computed:{
        tj(){
           return this.items.reduce((pre,datas)=>{
                return pre + (datas.done?1:0);
            },0)

        },
        listLength(){
            return this.items.length
        },
        isAll(){
            return this.tj === this.listLength && this.tj !== 0
        }
    },
    methods:{
        oCheckAll(e){
            return this.checkAll(e.target.checked)
        }
    }
}
</script >

<style scoped>
*{
    margin: 5rem auto;
    /* background-color: orange; */
}
div{
    width: auto;
    height: auto;
    text-align: center;
    font-size: 2rem;
}
#todocount {
  width: 2px;
  height: 32px;
  background-color: #FFFFFF;
  display: inline-block;
  border-radius: 70%;
  /* float: right; */
  font-size: 2rem;
  margin-top: 10px;
  margin-left: 2rem;
  padding-left: 5rem;
  text-align: center;
  line-height: 30px;
}

</style>